<template>
  <router-link></router-link>




  <!-- 首页轮播图 -->
  <el-carousel height="100vh" class="carousel" id="carousel" interval="3000" pause-on-hover="false">
    <el-carousel-item v-for="item in images" :key="item" interval="3000" pause-on-hover="false">
      <img :src="item" alt="" style="width: 100%; display: block; margin: 0 auto; object-fit: cover;">
    </el-carousel-item>
  </el-carousel>

  <!-- 核心优势,这一段的代码实现复用 -->
  <div class="mainAdvantage">
    <h1 title="title">核心优势</h1>
    <div class="line"></div>
    <span class="introduce">全面展示企业声呐技术、无人船与检测能力的卓越优势。</span>
  </div>

  <section class="features">
    <div class="feature" v-for="(item, index) in mainCardData" :key="index">
      <a href="">
        <img :src="item.img" alt="Feature 1" @click="goToPage('about', index)">
      </a>
      <div class="text">
        <h3>{{ item.title }}</h3>
        <p>{{ item.content }}</p>
      </div>
    </div>
  </section>

  <!-- 服务 -->
  <div class="mainAdvantage">
    <h1 title="title">业务范围</h1>
    <div class="line"></div>
    <span class="introduce">提供海洋监测、管道检测、沉船打捞等多种水下服务</span>
  </div>
  <br>

  <!-- <section class="services">
    <div class="feature animate" v-for="(item, index) in serviceCardData">
      <a href="">
        <img :src="item.img" alt="Feature 1" @click="goToPage('services', index)">
      </a>
      <div class="text">
        <h3>{{ item.title }}</h3>
        <p>{{ item.content }}</p>
      </div>
    </div>
  </section> -->

  <div class="serviceCard">
    <!-- 当页面为PC端，宽屏的时候，使用横向的轮播图 -->
    <el-carousel :interval="4000" type="card" height="340px" v-if="getWidth() > 1200" style="margin: 0 20px;">
      <el-carousel-item v-for="(item, index) in serviceCardData" :key="index">
        <a href="">
          <!-- 这里图片需要加上100%，为了代码的复用这里进行一点差异化 -->
          <img :src="item.img" alt="Feature 1" @click="goToPage('services', index)" style="height: 100%; width: 100%;">
        </a>
        <!-- <div class="text">
        <h3>{{ item.title }}</h3>
        <p>{{ item.content }}</p>
      </div> -->
      </el-carousel-item>
    </el-carousel>

    <!-- 当页面为手机移动端的时候，选择使用纵向轮播图 -->
    <el-carousel height="400px" direction="vertical" :autoplay="true" v-else style="margin: 0 20px;"
      class="serviceCard">
      <el-carousel-item v-for="(item, index) in serviceCardData" :key="index">
        <a href="">
          <!-- 这里图片需要加上100%，为了代码的复用这里进行一点差异化 -->
          <img :src="item.img" alt="Feature 1" @click="goToPage('services', index)" style="height: 100%;">
        </a>
        <div class="text">
          <h3>{{ item.title }}</h3>
          <p>{{ item.content }}</p>
        </div>
      </el-carousel-item>
    </el-carousel>
  </div>


  <!-- 案例 -->
  <div class="mainAdvantage">
    <h1 title="title">案例展示</h1>
    <div class="line"></div>
    <span class="introduce">灵活设计传感器方案，打造满足客户需求的高品质产品</span>
  </div>
  <section class="cases " id="cases">
    <div class="case-item" v-for="(item, index) in casesData" :key="index">
      <a href="">
        <img :src="item.img" alt="Case Image" @click="goToPage('cases', index)">
      </a>
      <div class="text">
        <h3>{{ item.title }}</h3>
        <p>{{ item.content }}</p>
      </div>
    </div>
  </section>



  <!-- 新闻 -->
  <div class="mainAdvantage">
    <h1 title="title">新闻资讯</h1>
    <div class="line"></div>
    <span class="introduce">企业最新动态与前沿技术研究，紧跟行业发展</span>
  </div>
  <section class="news" id="news">
    <div class="news-container">
      <div class="news-card" v-for="(item, index) in newsCardData" :key="index" @click="goToPage('news', item.id)">
        <div class="news-image">
          <img :src="`http://localhost/dev-api${item.coverImage}`" alt="News Image">
        </div>
        <div class="news-content">
          <h3 class="news-title">{{ item.title }}</h3>
          <p class="news-summary">{{ item.summary }}</p>
          <div class="news-meta">
            <span class="news-time">{{ item.updateTime }}</span>
            <span class="news-read-more">阅读更多 →</span>
          </div>
        </div>
      </div>
    </div>
    <el-button type="primary" round @click="goToPage('news')">查看更多...</el-button>
  </section>

  <!-- <div class="bummy" style="height: 100px;"></div> -->



  <!-- 这里实现的是固定的导航栏 -->
  <div class="sideBar">
    <div class="icons">
      <div class="icon-item" @mouseenter="showText('phone')" @mouseleave="hideText('phone')">
        <el-icon size="30">
          <Phone />
        </el-icon>
        <div class="phone" ref="phone">联系电话：12345679</div>
      </div>
      <div class="icon-item" @mouseenter="showText('edit')" @mouseleave="hideText('edit')">
        <el-icon size="30">
          <EditPen />
        </el-icon>
        <div class="edit" ref="edit">意见反馈邮箱:<br>123456789@qq.com</div>
      </div>
      <div class="icon-item" @mouseenter="showText('top')" @mouseleave="hideText('top')">
        <div class="top" ref="top">回到顶部</div>
        <!-- <a href="#carousel" style="color: black;"> <el-icon size="50"><Top /> </el-icon></a> -->
        <a @click="scrollToTop" style="color: black;"><el-icon size="30">
            <Top />
          </el-icon></a>
      </div>
    </div>

  </div>

</template>
<script setup>
import { ref, reactive, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import { gsap } from 'gsap';
import { ScrollToPlugin } from 'gsap/ScrollToPlugin';
import { ScrollTrigger } from 'gsap/ScrollTrigger';
import { listNews } from '../../api/index'
import { useStore } from 'vuex'
const router = useRouter()
const store = useStore()
// 注册 ScrollTrigger 插件
gsap.registerPlugin(ScrollTrigger);

//监听方法，检测页面的宽度
function getWidth() {
  return window.innerWidth;
};


//这里进行页面跳转
const goToPage = (id, no) => {
  //这里的id是每个模块的id，no是对应模块里面每个的编号

  router.push(`${id}?No=${no}`)
  store.selectedNews = no
}
//展示图片资源
const images = ref([
  '/img/BA1.jpg',
  '/img/BA2.jpg',
  '/img/BA3.jpg',
  '/img/BA4.jpg'
])

//这里存储对应卡片的内容信息
const mainCardData = reactive([
  {
    title: '核心技术',
    content: '提供最先进的声呐检测技术。',
    img: '/img/BA1.jpg'
  },
  {
    title: '无人船平台',
    content: '水下检测的智能解决方案。',
    img: '/img/BA2.jpg'
  },
  {
    title: '服务案例',
    content: '丰富的行业经验和案例展示。',
    img: '/img/BA3.jpg'
  }
])

//服务信息存储
const serviceCardData = reactive([
  {
    title: '海洋监测',
    content: '提供海洋环境监测服务。',
    img: '/img/BA1.jpg'
  },
  {
    title: '管道检测',
    content: '管道泄漏检测与维护。',
    img: '/img/BA2.jpg'
  },
  {
    title: '沉船打捞',
    content: '沉船打捞与水下考古。',
    img: '/img/BA3.jpg'
  },
  {
    title: '星际争霸',
    content: '沉船打捞与水下考古。',
    img: '/img/BA4.jpg'
  }
])

//新闻简介部分信息存储
const newsCardData = ref([])

//案例展示部分的数据存储
const casesData = [
  {
    title: '海洋环境监测',
    content: '利用声呐技术进行海洋环境监测。',
    img: '/img/BA1.jpg'
  },
  {
    title: '星际争霸',
    content: '使用无人船进行海底管道泄漏检测与维护。',
    img: '/img/BA2.jpg'
  },
  {
    title: '沉船打捞',
    content: '通过水下机器人进行沉船定位与打捞。',
    img: '/img/BA3.jpg'
  },
  {
    title: '水下考古',
    content: '利用高精度声呐技术进行水下遗址探测。',
    img: '/img/BA4.jpg'
  },
  {
    title: '珊瑚礁生态监测',
    content: '通过水下摄像设备监测珊瑚礁生态系统的健康状况。',
    img: '/img/BA1.jpg'
  }
];



// 侧边栏的动画
const refs = reactive({
  phone: "",
  edit: "",
  top: "",
})

// 确保 DOM 元素挂载后可用
onMounted(() => {
  //页面刷新时进行宽度获取
  console.log(getWidth());

  // console.log('Refs mounted:', refs); // 检查是否正确绑定
  //获取首页的部分新闻
  listNews().then(res => {
    console.log(res.data.rows)//目前测试已通过
    newsCardData.value = res.data.rows;

  });


  // 获取所有子板块
  const features = gsap.utils.toArray('.features .feature');

  // 为每个子板块添加动画,实现依次出现的效果
  features.forEach((feature, index) => {
    gsap.from(feature, {
      opacity: 0,
      y: 50, // 从下方 50px 的位置开始
      duration: 0.5,
      ease: 'power2.out',
      scrollTrigger: {
        trigger: '.features', // 触发动画的父容器
        start: 'top 70%', // 当父容器的顶部进入视口的 70% 时触发
        toggleActions: 'play none none none', // 触发时播放动画，滚动回去时不反向播放
      },
      delay: index * 0.5, // 每个子板块依次延迟 0.3 秒
    });
  });




  //案例展示区域的效果图
  // 获取所有案例项目
  const cases = gsap.utils.toArray('.cases .case-item');


  //这里监听窗口的宽度
  let eachWidth = ref((window.innerWidth - 1500) / 5)
  let windowWidth1 = ref(eachWidth.value <= 0 ? 0 : eachWidth.value);
  console.log(windowWidth1.value)
  // 设置初始状态
  gsap.set(cases, {
    x: 0, // 初始位置在中间
    opacity: 0, // 初始状态为透明
    scale: 0.8, // 初始缩放
  });

  // 为每个案例项目添加动画
  gsap.to(cases, {
    opacity: 1,
    scale: 1,
    x: (index) => (index - 2) * windowWidth1.value, // 横向展开，中间的项目不动，左右两侧依次展开
    duration: 1,
    ease: 'power2.out',
    stagger: 0.25, // 每个项目依次延迟 0.2 秒
    scrollTrigger: {
      trigger: '.cases', // 触发动画的父容器
      start: 'top 70%', // 当父容器的顶部进入视口的 70% 时触发
      toggleActions: 'play none none none', // 触发时播放动画，滚动回去时不反向播放
    },
  });


  //这里是业务范围的动画
  const services = gsap.utils.toArray('.serviceCard');
  // 设置初始状态
  gsap.set(services, {
    y: 50, // 初始位置底部
    x: 0, // 初始位置在中间
    opacity: 0, // 初始状态为透明
    scale: 0.8, // 初始缩放
  });

  // 为每个案例项目添加动画
  gsap.to(services, {
    opacity: 1,
    scale: 1,
    duration: 1,
    y: 0,
    ease: 'power2.out',
    stagger: 1, // 每个项目依次延迟 0.2 秒
    scrollTrigger: {
      trigger: '.serviceCard', // 触发动画的父容器
      start: 'top 90%', // 当父容器的顶部进入视口的 70% 时触发
      toggleActions: 'play none none none', // 触发时播放动画，滚动回去时不反向播放
    },
  });



});

const showText = (key) => {
  gsap.to(`.${key}`, { x: -100, opacity: 1, duration: 0.3, ease: 'power1.out' });
  // console.warn(`Element ref '${key}' not found or not mounted.`);
};

const hideText = (key) => {
  gsap.to(`.${key}`, { x: 0, opacity: 0, duration: 0.3, ease: 'power1.in' });
  // console.warn(`Element ref '${key}' not found or not mounted.`);
};
gsap.registerPlugin(ScrollToPlugin);
const scrollToTop = () => {
  gsap.to(window, {
    scrollTo: { y: 0 }, // 滚动到页面顶部
    duration: 0.5, // 动画持续时间 0.5 秒
    ease: 'power1.out' // 使用平滑的缓动函数
  });
};








</script>
<style scoped lang="less">
/* 这里是侧边栏的样式 */
.sideBar {
  top: 60%;
  width: 60px;
  position: fixed;
  right: 2vw;
  height: 180px;
  margin-top: -120px;
  z-index: 9999;
  background-color: rgba(141, 141, 141, 0.2);
  border-radius: 50px;

  .icons {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 10px;
    height: 100%;
    justify-content: flex-end;

    .icon-item {
      position: relative;
      margin-bottom: 20px;

      .phone,
      .edit,
      .top {
        position: absolute;
        right: -30px;
        top: 50%;
        transform: translateY(-50%);
        white-space: nowrap;
        opacity: 0;
        background-color: rgba(0, 0, 0, 0.7);
        color: #fff;
        padding: 5px 10px;
        border-radius: 5px;
        pointer-events: none;
        cursor: pointer;
      }
    }
  }
}




/* 轮播图样式 */
.carousel {
  position: relative;
  height: 80vh;

  /* 轮播图高度全屏 */
  img {
    object-fit: cover;
    /* 确保图片填充 */
    width: 100%;
    height: 100%;
  }

  ::v-deep .el-carousel__arrow--left {
    font-size: 40px;
    color: #02E9FF;
  }

  //右箭头
  ::v-deep .el-carousel__arrow--right {
    font-size: 40px;
    color: #02E9FF;
  }


}


/*  */
body {
  padding: 0;
  margin: 0;
  font-family: Arial, sans-serif;
  background-color: #f4f4f4;
}

.hero {
  background: url('https://via.placeholder.com/1600x600') no-repeat center center/cover;
  height: 600px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #0078D4;
  text-align: center;
}

.hero h1 {
  font-size: 3rem;
  margin: 0;
}

.carousel {
  position: relative;
  width: 100%;
  overflow: hidden;
}

.carousel img {
  width: 100%;
  display: block;
}

.carousel .controls {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 100%;
  display: flex;
  justify-content: space-between;
}

.carousel .controls button {
  background-color: rgba(0, 0, 0, 0.5);
  color: white;
  border: none;
  padding: 10px;
  cursor: pointer;
  font-size: 1.5rem;
}






// .features{
//   padding: 50px 0px;
//   // margin: 50px 20px;
//   background-color: white;
//   margin-bottom: 20px;
// }

.features {
  display: grid;
  // justify-content: space-around;
  grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
  gap: 30px;
  margin: 0 auto;
  justify-content: center;
  /* 水平居中 */
  align-content: center;
  /* 垂直居中 */
  margin: 0 10vw;
}

@media (max-width: 800px) {
  .features {
    grid-template-columns: 1fr;
    /* 单列布局 */
    margin: 0 10px;
  }

  .feature {
    margin-bottom: 20px;
    /* 增加卡片之间的间距 */
    margin: 20px 20px;

    .text {
      bottom: -4%; // 文字移到图片上方
    }
  }

}

.feature {

  position: relative;
  overflow: hidden;
  // width: 30vw; // 调整为需要的宽度
  height: 30vh; // 调整为需要的高度
  border-radius: 10px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  min-width: 400px;


  .text {
    position: absolute;
    bottom: -100%; // 初始位置在图片下方
    left: 0;
    width: 100%;
    background: rgba(0, 0, 0, 0.7); // 半透明背景提升文字可读性
    color: #fff;
    padding: 15px;
    text-align: center;
    transition: bottom 0.5s ease; // 文字进入动画
  }

  &:hover {
    img {
      transform: scale(1.1); // 鼠标悬停时放大图片
    }

    .text {
      bottom: 0; // 文字移到图片上方
    }
  }
}


//这里是服务板块,顺便把其他的边框都整了
.serviceCard {
  margin: 0 10vw;
}

@media (max-width: 1200px) {
  .serviceCard {
    // grid-template-columns: 1fr; /* 单列布局 */
    margin: 0 10px;
  }

}

.feature img,
.service img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s ease; // 鼠标悬停时可选的缩放效果
}

.mainAdvantage {
  max-width: 0 auto;
  text-align: center;

  h1 {
    // border-bottom: #0078D4 solid 3px;
    // background: pink;
    margin-top: 80px;
    padding-bottom: 10px;
    line-height: 40px;
    font-size: 40px;
  }

  .line {
    width: 80px;
    height: 4px;
    background: #333;
    margin: 0 auto;
  }

  .introduce {
    display: inline-block;
    padding: 20px 0 0 0;
    overflow: hidden;
    color: #737373;
    font-size: 16px;
    line-height: 26px;
    text-align: center;
  }
}





.news {
  padding: 50px 20px;
  background-color: #f9f9f9;
  text-align: center;
}

.news-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 30px;
  margin-bottom: 30px;
}

.news-card {
  background: #fff;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  cursor: pointer;
}

.news-card:hover {
  transform: translateY(-10px);
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
}

.news-image {
  width: 100%;
  height: 200px;
  overflow: hidden;
}

.news-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s ease;
}

.news-card:hover .news-image img {
  transform: scale(1.1);
}

.news-content {
  padding: 20px;
  text-align: left;
}

.news-title {
  font-size: 1.5rem;
  margin-bottom: 10px;
  color: #333;
}

.news-summary {
  font-size: 1rem;
  color: #666;
  line-height: 1.6;
  margin-bottom: 15px;
}

.news-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.9rem;
  color: #999;
}

.news-read-more {
  color: #0078D4;
  font-weight: bold;
  transition: color 0.3s ease;
}

.news-card:hover .news-read-more {
  color: #005bb5;
}

@media (max-width: 768px) {
  .news-container {
    grid-template-columns: 1fr;
  }

  .news-card {
    margin-bottom: 20px;
  }
}

.animate {
  animation: fadeInUp 1s ease;
}




//这里是案例的测试动画
.cases {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: 20px;
  /* 项目之间的间距 */
  padding: 50px 0;
}

.case-item {
  position: relative;
  width: 250px;
  /* 项目宽度 */
  height: 300px;
  /* 项目高度 */
  border-radius: 10px;
  // padding: 10px 10px;
  overflow: hidden;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  opacity: 0;
  /* 初始状态为透明 */
  transform: scale(0.8);
  /* 初始缩放 */
}

.case-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.case-item .text {
  position: absolute;
  box-sizing: border-box;
  bottom: 0;
  left: 0;
  width: 100%;
  background: rgba(0, 0, 0, 0.7);
  /* 半透明背景提升文字可读性 */
  color: #fff;
  padding: 15px;
  text-align: center;
}
</style>